<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div class="avue-breadcrumb"
           :class="[{ 'avue-breadcrumb--active': isCollapse }]"
           v-if="showCollapse">
        <i class="icon-navicon"
           @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">

      <im ref="im"></im>

      <!-- <span class="top-bar__item"
            v-if="showMenu">
        <top-menu></top-menu>
        <div class="top-menu guanggao">
          <a href="https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=p4kqz45e"
             target="_blank">阿里云5折优惠券，点我领取</a>
        </div>
      </span> -->

      <span class="top-bar__item"
            v-if="showSearch">
        <top-search></top-search>
      </span>
    </div>
    <div class="top-bar__right">
     <!-- <el-tooltip v-if="showColor"
                  effect="dark"
                  :content="$t('navbar.color')"
                  placement="bottom">
        <div class="top-bar__item">
          <top-color></top-color>
        </div>
      </el-tooltip> -->
<!--      <el-tooltip v-if="showDebug"-->
<!--                  effect="dark"-->
<!--                  :content="logsFlag?$t('navbar.bug'):logsLen+$t('navbar.bugs')"-->
<!--                  placement="bottom">-->
<!--        <div class="top-bar__item">-->
<!--          <top-logs></top-logs>-->
<!--        </div>-->
<!--      </el-tooltip>-->
      <el-tooltip v-if="showLock"
                  effect="dark"
                  :content="$t('navbar.lock')"
                  placement="bottom">
        <div class="top-bar__item">
          <top-lock></top-lock>
        </div>
      </el-tooltip>
     <!-- <el-tooltip v-if="showTheme"
                  effect="dark"
                  :content="$t('navbar.theme')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-theme></top-theme>
        </div>
      </el-tooltip> -->
      <!-- <el-tooltip effect="dark"
                  :content="$t('navbar.language')"
                  placement="bottom">
        <div class="top-bar__item top-bar__item--show">
          <top-lang></top-lang>
        </div>
      </el-tooltip> -->
      <el-tooltip v-if="showFullScren"
                  effect="dark"
                  :content="isFullScren?$t('navbar.screenfullF'):$t('navbar.screenfull')"
                  placement="bottom">
        <div class="top-bar__item">
          <i :class="isFullScren?'icon-tuichuquanping':'icon-quanping'"
             @click="handleScreen"></i>
        </div>
      </el-tooltip>
      <img class="top-bar__img"
           :src="userInfo.avatar">
      <el-dropdown>
        <span class="el-dropdown-link">
          {{userInfo.result2}} - {{userInfo.result1}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
          </el-dropdown-item>
          <el-dropdown-item v-if="roles">
            <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
          </el-dropdown-item>
          <el-dropdown-item v-if="roles || isAdmin">
            <router-link to="/info/setting">{{$t('navbar.setting')}}</router-link>
          </el-dropdown-item>
<!--          <el-dropdown-item v-if="roles">-->
<!--            <el-dropdown>-->
<!--              <span class="el-dropdown-link">-->
<!--                {{$t('navbar.storesSetting')}}-->
<!--                <i class="el-icon&#45;&#45;right"></i>-->
<!--              </span>-->
<!--              <el-dropdown-menu slot="dropdown">-->
                <el-dropdown-item v-if="roles" @click.native="closeReason">
                  {{$t('navbar.storesClose')}}
                </el-dropdown-item>
                <el-dropdown-item v-if="!closeFlag && roles" @click.native="resetClose">
                  {{$t('navbar.storesUnclose')}}
                </el-dropdown-item>
<!--              </el-dropdown-menu>-->
<!--            </el-dropdown>-->
<!--          </el-dropdown-item>-->
          <el-dropdown-item @click.native="logout"
                            divided>{{$t('navbar.logOut')}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
            title="申请理由"
            :visible.sync="dialogVisibleClose"
            width="30%">
      <textarea style="width: 100%;min-height:200px" maxlength="100" minlength="10" show-word-limit  placeholder="请输入申请理由" v-model="closeReasonText"></textarea>
      <span slot="footer" class="dialog-footer">
     <el-button type="primary" @click="closeSure">提 交</el-button>
    <el-button @click="dialogVisibleClose = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import { removeStore } from "@/util/auth";
import constants from "@/const/constants";
import { fullscreenToggel, listenfullscreen } from "@/util/util";
import topLock from "./top-lock";
import topMenu from "./top-menu";
import topSearch from "./top-search";
import topTheme from "./top-theme";
import topLogs from "./top-logs";
import topColor from "./top-color";
import topLang from "./top-lang";
import im from "@/components/im";
import user from '@/store/modules/user.js'
import {editStoreStatus,getStoreStatus} from '@/api/page/index.js'
export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topColor,
    topLang,
    im
  },
  name: "top",
  data () {
    return {
      dialogVisibleClose:false,
      closeReasonText:'', // 申请理由
      closeFlag:false,
      roles:false,
	  isAdmin:false
    };
  },
  filters: {},
  created () {
    this.isAdmin = user.state.roles.includes(1)
    this.roles = user.state.roles.includes(2)
    if(this.roles) {
      this.getStoreStatusFn()
    }
    console.log(this.roles,'SET_ROLES')
  },
  mounted () {
    listenfullscreen(this.setScreen);
  },
  computed: {
    ...mapState({
      showDebug: state => state.common.showDebug,
      showTheme: state => state.common.showTheme,
      showLock: state => state.common.showLock,
      showFullScren: state => state.common.showFullScren,
      showCollapse: state => state.common.showCollapse,
      showSearch: state => state.common.showSearch,
      showMenu: state => state.common.showMenu,
      showColor: state => state.common.showColor
    }),
    ...mapGetters([
      "userInfo",
      "isFullScren",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag"
    ])
  },
  methods: {
    handleScreen () {
      fullscreenToggel();
    },
    setCollapse () {
      this.$store.commit("SET_COLLAPSE");
    },
    setScreen () {
      this.$store.commit("SET_FULLSCREN");
    },
    logout () {
      let logoutHref=window.location.origin;
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning"
      }).then(() => {
        this.$store.dispatch("LogOut",logoutHref); //退出登录
      });
    },
    // 点击店铺歇业
    closeReason() {
      this.closeReasonText=''
      this.getStoreStatusFn()
      this.dialogVisibleClose = true
    },
    // 点击确定
    closeSure() {
	  if(this.closeReasonText.length>100 || this.closeReasonText.length<10) {
	    this.$message({
	      type: "warning",
	      message: "请输入10-100长度的申请理由!"
	    });
	    return;
	  }
      let status = 5
      this.editStoreStatusFn(status,this.closeReasonText)
      this.dialogVisibleClose = false
    },
    editStoreStatusFn(status,text) {
      let query={
        storeStatus:status,
        closureContent:text
      }
      editStoreStatus(query).then(res=>{
        if(res.data.code==200) {
          this.$message({
            type: "success",
            message: "申请已发送!"
          });
		  this.getStoreStatusFn()
        }else {
          this.$message({
            type: "warning",
            message:res.message,
          })
        }
      })
    },
    // 申请恢复营业
    resetClose() {
      this.$confirm('此操作将恢复店铺正常营业, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.editStoreStatusFn(8,'')

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消申请'
        });
      })
    },
    getStoreStatusFn() {
      getStoreStatus().then(res=>{
          if(res.data.code==200) {
            this.closeFlag = res.data.data
          }
      })
    }
  }
};
</script>

<style lang="scss">
.guanggao a {
  font-size: 12px;
  margin-right: 20px;
  line-height: 64px;
  display: inline-block;
}
.el-dropdown {
  display: inline-block;
  position: relative;
  color: #606266;
  font-size: 12px;
}
</style>